<!--
 * @Description: 散点图刷选
 * @Author: xjc
 * @Date: 2022-06-21 15:17:17
 * @LastEditTime: 2022-06-21 15:19:34
 * @LastEditors: xjc
-->
<template>
  <div id="brush-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Scatter} = G2Plot

onMounted(() => {
  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json')
  .then(res => res.json())
  .then(data => {
    const plot = new Scatter('brush-container', {
      data,
      xField: 'weight',
      yField: 'height',
      colorField: 'gender',
      size: 5,
      shape: 'circle',
      pointStyle: {fillOpacity: 1},
      brush: {
        enabled: true,
        mask: {
          style: {fill: 'rgba(255,0,0,0.15)'}
        }
      }
    })
    plot.render()
  })
})
</script>
